<template>
  <div class="activity-info">
    <div class="content">
      <img src="./images/info-img.png" alt="">
      <div class="title">广工清远校友会</div>
      <div class="sub">
        <div v-if="isFail" class="error">
          <van-icon name="clear" class="icon-error" />
          您未报名活动，签到失败
        </div>
        <template v-else>
          <van-icon name="checked" class="icon-checked" />{{
            isPay ? "您已报名成功" : "您已确认参加"
          }}
        </template>
      </div>
    </div>
    <ul class="list">
      <li>
        <span>活动名称：</span>
        <div>
          {{ obj.title }}
        </div>
      </li>
      <li>
        <span>时间：</span>
        <div>
          {{ formatTime(obj.startTime) }} - {{ formatTime(obj.endTime) }}
        </div>
      </li>
      <li>
        <span>地点：</span>
        <div>{{ obj.address }}</div>
      </li>
      <li>
        <span>其他说明：</span>
        <div>{{ obj.notice }}</div>
      </li>
    </ul>
    <div class="btx-flex">
      <van-button
        class="btn"
        plain
        hairline
        type="info"
        @click="GomyActivity"
      >我的活动</van-button>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'

export default {
  data() {
    return {
      obj: {},
      isPay: false,
      isFail: false
    }
  },
  created() {
    if (this.$route.query.isPay) {
      this.isPay = true
    }
    this.getData()
  },
  methods: {
    GomyActivity() {
      this.$router.push({
        name: 'allActivity',
        query: { index: 2 }
      })
    },
    getData() {
      const { activityId } = this.$route.query
      if (!this.isPay) {
        this.$axios({
          method: 'post',
          url: `/user/signin?activityId=${activityId}`
        }).then((res) => {
          if (res.data.code === 200) {
            console.log(res.data, '签到成功')
          } else {
            this.isFail = true
            Toast(res.data.msg)
          }
        })
      }
      this.$axios({
        method: 'post',
        url: `/activity/details?activityId=${activityId}`
      }).then((res) => {
        console.log(res)
        if (res.data.code === 200) {
          this.obj = res.data.data
        }
      })
    },
    formatTime(time) {
      return (time || '').slice(0, 10).replace(/-/g, '.')
    }
  }
}
</script>

<style scoped>
.activity-info {
  height: 100vh;
  background: #fff;
}
.content {
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: #333;
  padding-top: 16px;
  margin: 0 8px 13px;
  padding-bottom: 20px;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.content img {
  width: 112px;
  height: 112px;
}
.content .title {
  font-size: 20px;
  margin: 8px auto 7px;
}
.content .sub {
  font-size: 16px;
  line-height: 20px;
}
.list {
  font-size: 14px;
  margin: 0;
  padding: 1px 0 0;
}
.list li {
  display: flex;
  margin: 7px 23px;
}
.list span {
  width: 90px;
  display: inline-block;
  color: #969799;
  line-height: 20px;
}
.list div {
  display: inline-block;
  width: 80%;
}
.icon-checked {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  color: #1990ff;
  margin: -2px 5px 0 0;
}
.btn {
  width: 104px;
  height: 32px;
  border-radius: 4px;
  margin-top: 13px;
}
.btx-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.error {
  color: red;
}
.icon-error {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  color: red;
  margin: -3px 5px 0 0;
}
</style>
